<template>
  <div class="wrapper">
    <div class="title">
        <el-icon><ShoppingCart/></el-icon>
        我的购物车
    </div>
    <el-table 
	:data="data" 
	:header-cell-style="{background:'#F3F4F7',color:'#555',}">
        <!-- 选择框 -->
        <el-table-column type="selection"></el-table-column>
		<el-table-column label="商品图片" prop="imgs"></el-table-column>
        <el-table-column label="商品" width="400px" prop="name"></el-table-column>
        <el-table-column label="单价（元)" >
			<template #default="scope">
				<span class="price-icon">￥</span>
				<span class="price">{{scope.row.price}}</span>
			</template>
		</el-table-column>
        <el-table-column label="数量" width="180px">
			<template #default="scope">
				<div class="num-container">
					<el-button :icon="Minus" @click="minus(scope.row)" :disabled="scope.row.num === 1"/>
					<!-- 在写input-style时，要注意使用JavaScript语法来返回对象 用 -->
					<el-input v-model="scope.row.num" :input-style="{'text-align': 'center',}"></el-input>
					<el-button :icon="Plus" @click="plus(scope.row)" :disabled="scope.row.num === scope.row.store"/>
				</div>
			</template>
		</el-table-column>
        <el-table-column label="小计" width="100px">
			<template #default="scope">
				<span class="price-icon">￥</span>
				<span class="price">{{scope.row.sum}}</span>
				 
			</template>
		</el-table-column>
        <el-table-column label="操作" width="80px">
			<el-button type="danger" size="small" @click="del()">删除</el-button>
		</el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { ShoppingCart } from '@element-plus/icons-vue'
import { reactive } from 'vue'
const data = reactive([
	{
		imgs: '',
		name: '热辣香骨鸡',
		price: 19.90,
		num: 4,
		sum: 59.7,
		store: 10
	}
])
function minus(row) {
	if (row.num > 1) {
	    row.num--
		calculateSum(row)
	} else{
		
	}
}
function calculateSum(row) {
	row.sum = parseFloat(row.num * row.price).toFixed(2)
}
function plus(row) {
	// 条件为小于库存
	if(row.num < row.store) {
		row.num++
		calculateSum(row)
	} else{
		console.dir('不够了')
	}
}
function del() {
	console.dir(data)
}
</script>

<style scoped lang="scss">
.wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    .title{
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        width: 1100px;
        height: 40px;
        font-size: 22px;
        font-weight: 600;
        margin-top: 40px;
        text-align: center;
        line-height: 40px;
        margin-right: auto;
        margin-left: auto;
        background-color: #e2ecf0;
        border-radius: 5px;
        .el-icon{
            margin-right: 8px;
        }
    }
    .el-table{
        width: 1100px;
        margin-top: 46px;
		.num-container{
			display: flex;
			.el-input{
				margin-left: 5px;
				margin-right: 5px;
				width: 40px;			
			}
			.el-button{
				width: 40px;
				height: 35px;
			}
		}
		.price-icon{
			color: #ff6200;
			font-size: 12px;
			font-weight: 700;
			line-height: 16px;
		}
		.price{
			color: #ff6200;
			font-size: 16px;
			font-weight: 700;
			line-height: 36px;
		}
    }
}
</style>